<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Card, Form, Select, DatePicker, Button, message, InputNumber } from 'ant-design-vue';
import { getAvailableDresses, type DressResourceApi } from '#/api/wedding/dressresource';
import { createDressRentalOrder } from '#/api/wedding/dressrentalorder';

const formRef = ref();
const loading = ref(false);
const dresses = ref<DressResourceApi.DressResource[]>([]);
const formData = ref({
  dressCode: undefined,
  customerId: '',
  rentStartDate: '',
  rentDays: 3,
});

const loadDresses = async () => {
  loading.value = true;
  try {
    dresses.value = await getAvailableDresses({
      startDate: new Date().toISOString(),
      days: 3,
    });
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  loading.value = true;
  try {
    await createDressRentalOrder(formData.value as any);
    message.success('预约成功');
    formRef.value?.resetFields();
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadDresses();
});
</script>

<template>
  <div>
    <div class="grid grid-cols-4 gap-4 mb-6">
      <Card 
        v-for="dress in dresses" 
        :key="dress.id"
        hoverable
        class="cursor-pointer"
      >
        <img v-if="dress.images && dress.images[0]" :src="dress.images[0]" class="w-full h-48 object-cover rounded mb-2" />
        <div class="font-medium">{{ dress.dressName }}</div>
        <div class="text-sm text-gray-500">{{ dress.brand }}</div>
        <div class="text-red-500 font-bold mt-2">¥{{ dress.rentalPrice }}</div>
      </Card>
    </div>

    <Card title="快速预约">
      <Form ref="formRef" :model="formData" layout="inline">
        <Form.Item label="选择婚纱" name="dressCode" :rules="[{ required: true, message: '请选择婚纱' }]">
          <Select v-model:value="formData.dressCode" placeholder="请选择" style="width: 200px">
            <Select.Option v-for="dress in dresses" :key="dress.dressCode" :value="dress.dressCode">
              {{ dress.dressName }}
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="租赁日期" name="rentStartDate" :rules="[{ required: true, message: '请选择日期' }]">
          <DatePicker v-model:value="formData.rentStartDate" />
        </Form.Item>
        <Form.Item label="租赁天数" name="rentDays">
          <InputNumber v-model:value="formData.rentDays" :min="1" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" @click="handleSubmit" :loading="loading">提交预约</Button>
        </Form.Item>
      </Form>
    </Card>
  </div>
</template>

